<template>
  <div class="project">
    <div class="project-part">
      <div class="search_header">
        <div class="search_header_left">
          <el-button
            icon="el-icon-plus"
            @click="handleAdd"
            v-if="type === 'edit'"
            >新增问题</el-button
          >
        </div>
        <div class="search_header_right">
          <el-select
            placeholder="问题状态"
            v-model="parameter.status"
            clearable
            @change="getList"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.dictValue"
              :label="item.dictText"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <el-select
            placeholder="问题类型"
            v-model="parameter.type"
            clearable
            @change="getList"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-select
            placeholder="隐患等级"
            v-model="parameter.problemLevelId"
            clearable
            @change="getList"
          >
            <el-option
              v-for="item in projectLevelOptions"
              :key="item.dictValue"
              :label="item.dictText"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <el-input
            placeholder="请输入问题部位/问题描述"
            clearable
            v-model="parameter.keywords"
            @input="getList"
          >
            <span
              slot="suffix"
              style="display: inline-block"
              v-show="!parameter.keywords"
            >
              <Icon
                title="搜索"
                name="sousuo"
                color="#A7ADB5"
                font-size="20"
              />
            </span>
          </el-input>
        </div>
      </div>
      <div class="detail" v-loading="loading">
        <div
          class="detail-none"
          v-if="listData.length === 0"
        >
          <svg-icon
            icon-class="noMessage"
            font-size="130"
          ></svg-icon>
          <div class="detail-none-word">暂无问题</div>
        </div>

        <div
          class="detail-item"
          v-for="(item, index) of listData"
          :key="index"
        >
          <div class="detail-item-top">
            <div
              class="detail-item-top-status"
              :class="{
                active: item.status
              }"
            >
              {{ item.status ? '已整改' : '待整改' }}
            </div>
            <div class="detail-item-top-mid">
              <div class="detail-item-top-label">
                问题类型：
              </div>
              <div class="detail-item-top-value">
                {{ item.type }}
              </div>
              <template v-if="topType === '设备检查问题'">
                <div class="detail-item-top-label">
                  设备编号：
                </div>
                <div class="detail-item-top-value">
                  {{ item.equipNo }}
                </div>
              </template>
              <div class="detail-item-top-label">
                隐患等级：
              </div>
              <div class="detail-item-top-value">
                {{ item.problemLevelName }}
              </div>
              <div class="detail-item-top-label">
                问题部位：
              </div>
              <el-tooltip placement="top">
                <div
                  slot="content"
                  class="detail-item-top-tooltip"
                >
                  {{ item.problemPosition }}
                </div>
                <div class="detail-item-top-value">
                  {{ item.problemPosition }}
                </div>
              </el-tooltip>
              <div class="detail-item-top-label">
                违反条款：
              </div>
              <el-tooltip placement="top">
                <div
                  slot="content"
                  class="detail-item-top-tooltip"
                >
                  <p
                    v-for="(
                      security, sIndex
                    ) of item.securityContentInfoList"
                    :key="sIndex"
                  >
                    {{ sIndex + 1 }}、{{ security.content }}
                  </p>
                </div>
                <div
                  class="detail-item-top-value detail-item-top-value-max"
                >
                  {{ getSecurity(item) }}
                </div>
              </el-tooltip>
            </div>
            <div class="detail-item-top-operate">
              <el-button
                type="text"
                @click="handleEdit(item)"
                style="color: #00baff; font-weight: 400"
                v-if="showEidt"
                >编辑
              </el-button>
              <el-button
                @click="handleDelete(item)"
                type="text"
                style="color: #ff5b5b; font-weight: 400"
                v-if="showDelete"
                >删除
              </el-button>
              <el-button
                type="text"
                @click="handleChange(item)"
                style="color: #00baff; font-weight: 400"
                v-if="showChange"
                >整改
              </el-button>
              <el-button
                type="text"
                @click="handleView(item)"
                style="color: #00baff; font-weight: 400"
                v-if="!item.showDetail"
                ><i class="el-icon-arrow-right"></i>
              </el-button>
              <el-button
                type="text"
                @click="handleView(item)"
                style="color: #00baff; font-weight: 400"
                v-else
                ><i class="el-icon-arrow-down"></i>
              </el-button>
            </div>
          </div>
          <div
            class="detail-item-bottom"
            v-if="item.showDetail"
          >
            <div class="detail-item-bottom-part">
              <div class="detail-item-bottom-part-item">
                <div
                  class="detail-item-bottom-part-item-label"
                >
                  问题描述：
                </div>
                <div
                  class="detail-item-bottom-part-item-value"
                >
                  {{ item.remark }}
                </div>
              </div>
              <div class="detail-item-bottom-part-item">
                <div
                  class="detail-item-bottom-part-item-label"
                >
                  问题图片：
                </div>
                <div
                  class="detail-item-bottom-part-item-imgs"
                >
                  <div
                    class="detail-item-bottom-part-item-imgs-item"
                    v-for="(
                      img, imgIndex
                    ) of item.problemFileList"
                    :key="imgIndex"
                  >
                    <el-image
                      :src="getImage(img.fileId)"
                      :preview-src-list="
                        item.problemFileList.map((item) =>
                          getImage(item.fileId)
                        )
                      "
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="detail-item-bottom-part"
              v-if="item.status"
            >
              <div class="detail-item-bottom-part-item">
                <div
                  class="detail-item-bottom-part-item-label"
                >
                  整改措施：
                </div>
                <div
                  class="detail-item-bottom-part-item-value"
                >
                  {{ item.reformMeasure }}
                </div>
              </div>
              <div class="detail-item-bottom-part-item">
                <div
                  class="detail-item-bottom-part-item-label"
                >
                  整改图片：
                </div>
                <div
                  class="detail-item-bottom-part-item-imgs"
                >
                  <div
                    class="detail-item-bottom-part-item-imgs-item"
                    v-for="(
                      img, imgIndex
                    ) of item.changeFileList"
                    :key="imgIndex"
                  >
                    <el-image
                      :src="getImage(img.fileId)"
                      :preview-src-list="
                        item.changeFileList.map((item) =>
                          getImage(item.fileId)
                        )
                      "
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination" v-if="total">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="parameter.pageSize"
          @current-change="pageChange"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <addDialog
      ref="addRef"
      :typeOptions="typeOptions"
      :projectLevelOptions="projectLevelOptions"
      @refresh="getList(), $emit('updateCount')"
    />
  </div>
</template>
<script>
import { getDictOptions } from '@/utils/dict'
import addDialog from './addDialog.vue'
import Icon from '@/components/icon'
import {
  queryProblemList,
  queryTypeList,
  deleteProblemInfo,
  securityFileUrl
} from '@/api/reportManagement'
import {
  isAdmin,
  isEnterprise,
  isJldw,
  isSgdw,
  isJcdw
} from '@/utils/permission'

export default {
  props: {
    projectId: String,
    pkid: String,
    topType: String,
    type: String,
    detailInfo: Object,
    status: String
  },
  components: {
    addDialog,
    Icon
  },
  data() {
    return {
      loading: false,
      parameter: {
        refId: this.pkid,
        status: '',
        topType: '',
        type: '',
        problemLevelId: '',
        keywords: '',
        pageSize: 5,
        pageIndex: 1
      },
      listData: [],
      total: 0,

      typeOptions: [],
      projectLevelOptions: [],
      statusOptions: [
        {
          dictValue: '1',
          dictText: '已整改'
        },
        {
          dictValue: '0',
          dictText: '待整改'
        }
      ]
    }
  },
  computed: {
    /**
     * 编辑按钮显示：
     * 管理员 && (待提交状态 || 审核完成状态)
     * 检测单位 && 待提交状态
     */
    showEidt() {
      if (
        isAdmin() &&
        (this.status === '0' || this.status === '1')
      ) {
        return true
      } else if (isJcdw() && this.status === '0') {
        return true
      } else {
        return false
      }
    },
    /**
     * 删除按钮显示：
     * 管理员 && (待提交状态 || 审核完成状态)
     * 检测单位 && 待提交状态
     */
    showDelete() {
      if (
        isAdmin() &&
        (this.status === '0' || this.status === '1')
      ) {
        return true
      } else if (isJcdw() && this.status === '0') {
        return true
      } else {
        return false
      }
    },
    /**
     * 整改按钮显示：
     * 管理员 && 审核完成状态
     * 施工单位 && (待整改状态 || 退回修改）
     */
    showChange() {
      if (isAdmin() && this.status === '1') {
        return true
      } else if (
        isSgdw() &&
        (this.status === '2' || this.status === '-1')
      ) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.initOptions()
  },
  watch: {
    detailInfo(val) {
      if (val.pkid) {
        this.basicForm = Object.assign(
          this.basicForm,
          this.detailInfo
        )
      }
    }
  },
  methods: {
    // 展示图片
    getImage(pkid) {
      return securityFileUrl(pkid)
    },
    init(topType) {
      this.parameter.topType = topType
      this.initType()
      this.getList()
    },
    async initOptions() {
      const data = await getDictOptions(
        'securityProblemLevelInfo'
      )
      this.projectLevelOptions = data
    },
    async initType() {
      const res = await queryTypeList({
        topType: this.topType
      })
      this.typeOptions = res.data
    },
    pageChange(page) {
      this.parameter.pageIndex = page
      this.getList()
    },
    getList() {
      this.loading = true
      queryProblemList(this.parameter).then((res) => {
        if (res.success) {
          res.data.list.forEach((item) => {
            if (
              !item.violationRegulations ||
              item.changeFileList.length === 0
            ) {
              item.status = false
            } else {
              item.status = true
            }
            item.showDetail = true
          })
          this.listData = res.data.list
          this.total = res.data.count
        } else {
          this.$message.error(res.message)
        }
        this.loading = false
      })
    },
    handleAdd() {
      this.$refs.addRef.show(
        '新增问题',
        this.pkid,
        this.projectId,
        this.topType,
        {},
        false
      )
    },
    handleEdit(item) {
      this.$refs.addRef.show(
        '编辑问题',
        this.pkid,
        this.projectId,
        this.topType,
        JSON.parse(JSON.stringify(item)),
        false
      )
    },
    handleChange(item) {
      this.$refs.addRef.show(
        '整改问题',
        this.pkid,
        this.projectId,
        this.topType,
        JSON.parse(JSON.stringify(item)),
        true
      )
    },
    handleView(item) {
      item.showDetail = !item.showDetail
    },
    handleDelete(row) {
      this.$confirm(
        '此操作将永久删除该问题，是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          deleteProblemInfo(row.pkid).then((res) => {
            if (res.success) {
              this.$message.success('删除成功')
              this.getList()
              this.$emit('updateCount')
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch((error) => {
          this.$message.info('已取消删除')
        })
    },
    getSecurity(item) {
      let textArr = []
      item.securityContentInfoList.forEach((item) => {
        textArr.push(item.content)
      })

      return textArr.join(' ')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.project-part {
  height: calc(100% - 10px);
  display: flex;
  flex-direction: column;
}
.detail {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  &-none {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &-word {
      color: #4c565c;
      font-size: 14px;
    }
  }
  &-item {
    width: 100%;
    margin-bottom: 20px;
    &-top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      padding: 5px 20px;
      background-color: #fff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      border: 1px solid #f1f1f1;
      &-status {
        color: #fff;
        font-size: 14px;
        min-width: 70px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #66b1ff;
        border-radius: 5px;
        margin-right: 20px;
        &.active {
          background-color: #67c23a;
        }
      }
      &-mid {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      &-tooltip {
        max-width: 450px;
        p {
          margin-bottom: 10px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      &-label {
        min-width: 70px;
        font-size: 14px;
        color: #000000;
      }
      &-value {
        max-width: 200px;
        font-size: 14px;
        color: #4c565c;
        margin-right: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &-value-max {
        max-width: 450px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &-operate {
        display: flex;
      }
    }
    &-bottom {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      background-color: #f7f7f7;
      border-radius: 0 0 5px 5px;
      border: 1px solid #f1f1f1;
      &-part {
        width: 50%;
        box-sizing: border-box;
        padding: 5px 20px;
        &-item {
          width: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          &-label {
            min-width: 70px;
            font-size: 14px;
            color: #000000;
          }
          &-value {
            flex: 1;
            font-size: 14px;
            color: #4c565c;
            margin-bottom: 10px;
          }
          &-imgs {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            &-item {
              width: 150px;
              height: 100px;
              margin-right: 10px;
              margin-bottom: 10px;
              .el-image {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 15px;
  ::v-deep {
    .el-pagination {
      padding: 0;
      .btn-next {
        margin-right: 0;
      }
    }
    .active {
      background: #f6f9fc !important;
      color: #00baff !important;
    }
    button {
      border: 1px solid #ebf1f8 !important;
      background: white !important;
      color: #a7adb5 !important;
    }
    li {
      background: white !important;
      color: #00baff !important;
      border: 1px solid #ebf1f8;
      border-radius: 2px;
      font-weight: 400 !important;
      font-size: 12px !important;
      line-height: 25px !important;
    }
  }
}

.add-btn {
  background: #497fa3;
  border: 1px solid #497fa3;
  width: 104px;
  color: white;
  font-size: 14px;
  width: 104px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.project {
  margin-top: 0;
  &-part {
    .search_header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      ::v-deep .el-button {
        background: #497fa3 !important;
        color: white !important;
        border: none !important;
        border-radius: 2px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      &_left {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
      }
      &_right {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-end;
      }

      &_right::v-deep {
        // 输入框
        .el-input {
          width: auto !important;
          padding-bottom: 13px;
          .el-input__inner {
            width: 228px !important;
            height: 32px !important;
            // background: #f6f9fc !important;
            margin-left: 10px;
          }
          .el-input__suffix {
            height: 32px;
            .el-input__suffix-inner {
              display: inline-block;
              height: 32px !important;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .el-input__clear {
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
        // 下拉框
        .el-select {
          width: auto !important;
          padding-bottom: 13px;
          .el-input {
            padding-bottom: 0;
          }
          .el-input__inner {
            width: 170px !important;
            margin-left: 10px;
            // background: #f6f9fc;
          }
          .el-input__suffix {
            display: flex;
            align-items: center;
            justify-content: center;
            .el-input__icon {
              line-height: 32px !important;
              width: auto !important;
              height: auto !important;
            }
          }
        }
        // 树形选择框
        .el-cascader {
          .el-input {
            display: flex;
          }
          .el-input__inner {
            width: 170px !important;
          }
          .el-input__suffix {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .el-input__prefix {
          height: 32px !important;
          left: 10px !important;
        }
        .el-input__icon {
          line-height: 32px !important;
        }
      }
    }
  }
}
</style>
